<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<!-- senmentic 还使用了Jequery语法 -->
<!-- sementic还使用了Jquery语法所以要导入网上使用js的地址和jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .imgList {
            width: 100px;
            height: 100px;
        }

        #bigImgBox {
            border: 1px solid black;
            display: none;
            width: 200px;
        }

        #imgShow {
            border:1px dashed #ccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .span {
            height: 20px;
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<body>

<div class="ui grid" th:each="item:${resultList}">
    <img class="ui small image two wide column" th:src="${item}"  onclick="imgClick(this)">
</div>
<div class="ui two column grid">
    <div class="row">
        <img class="small image imgList" src="../static/1b43e51d9b05318b20b452204872bacf.png" onclick="imgClick(this)" />
        <img class="small image imgList" src="../static/1b43e51d9b05318b20b452204872bacf.png" onclick="imgClick(this)" />
        <img class="small image imgList" src="../static/1b43e51d9b05318b20b452204872bacf.png" onclick="imgClick(this)" />
        <img class="small image imgList" src="../static/1b43e51d9b05318b20b452204872bacf.png" onclick="imgClick(this)" />
    </div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<!--<div id="imgList" th:each="item:${resultList}">-->
<!--    <img class="ui small image" th:src="${item}" onclick="imgClick(this)"/>-->
<!--</div>-->
<div id="bigImgBox">
    <div class="span"><span>X</span></div>
    <img id="imgShow" src=""/>
</div>
</body>
<script>

    function imgClick(img) {
        $("#imgShow").attr("src", img.src);
        $("#bigImgBox").css("display", "block");
    }

    $(".span").on("click", function () {
        $("#bigImgBox").css("display", "none");
    })
</script>
</html>
